<template>
  <grimm-page type="popup-view" title="CascadePicker">
    <template slot="content">
      <div>
        <grimm-button block class="picker-btn" @click="showCascadePicker">Cascade Picker</grimm-button>
        <grimm-button block class="picker-btn" @click="showAddressPicker">Address Picker</grimm-button>
        <grimm-button block class="picker-btn" @click="showSetDataPicker">Set Data</grimm-button>
        <grimm-button block class="picker-btn" @click="showAsyncPicker">Async Load Data</grimm-button>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
import { provinceList, cityList, areaList } from 'example/data/area';
import { cascadeData } from 'example/data/cascade';
const asyncProvinceList = provinceList.slice();
const asyncCityList = JSON.parse(JSON.stringify(cityList));
const asyncAreaList = JSON.parse(JSON.stringify(areaList));

const addressData = provinceList;
addressData.forEach(province => {
  province.children = cityList[province.value];
  province.children.forEach(city => {
    city.children = areaList[city.value];
  });
});

const asyncData = asyncProvinceList;
const asyncSelectedIndex = [0, 0, 0];
asyncData[0].children = asyncCityList[asyncData[0].value];
asyncData[0].children[0].children = asyncAreaList[asyncData[0].children[0].value];

export default {
  components: { GrimmPage },
  data() {
    return {
      type: 'popup-dialog',
      mask: true,
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      position: '',
      multiList: [
        [
          { text: '剧毒v', value: '剧毒' },
          { text: '蚂蚁v', value: '蚂蚁' },
          { text: '幽鬼v', value: '幽鬼' },
        ],
        [
          { text: '输出v', value: '输出' },
          { text: '控制v', value: '控制' },
          { text: '核心v', value: '核心' },
          { text: '爆发v', value: '爆发' },
          { text: '输出2v', value: '输出2' },
          { text: '控制3v', value: '控制3' },
          { text: '核心4v', value: '核心4' },
          { text: '爆发5v', value: '爆发5' },
          { text: '输出6v', value: '输出6' },
          { text: '控制7v', value: '控制7' },
          { text: '核心8v', value: '核心8' },
          { text: '爆发9v', value: '爆发9' },
        ],
      ],
    };
  },
  mounted() {
    this.cascadePicker = this.$createCascadePicker({
      title: 'Cascade Picker',
      data: cascadeData,
      selectedIndex: [0, 1, 0],
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle,
    });

    this.addressPicker = this.$createCascadePicker({
      title: 'City Picker',
      data: addressData,
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle,
    });

    this.setDataPicker = this.$createCascadePicker({
      title: 'Set Data',
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle,
    });

    this.asyncPicker = this.$createCascadePicker({
      title: 'Async Load Data',
      async: true,
      data: asyncData,
      selectedIndex: asyncSelectedIndex.slice(),
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle,
      onChange: this.asyncChangeHandle,
    });
  },
  methods: {
    showCascadePicker() {
      this.cascadePicker.show();
    },
    showAddressPicker() {
      this.addressPicker.show();
    },
    showSetDataPicker() {
      // setData when the picker is invisible.
      this.setDataPicker.setData(cascadeData);

      this.setDataPicker.show();
      setTimeout(() => {
        // setData when the picker is visible.
        this.setDataPicker.setData(addressData, [1, 1, 0]);
      }, 1000);
    },
    showAsyncPicker() {
      this.asyncPicker.show();
    },
    asyncChangeHandle(i, newIndex) {
      if (newIndex !== asyncSelectedIndex[i]) {
        asyncSelectedIndex[i] = newIndex;
        // If the first two column is changed, request the data for rest columns.
        if (i < 2) {
          // Mock async load.
          setTimeout(() => {
            if (i === 0) {
              const current = asyncData[newIndex];
              current.children = current.children || asyncCityList[current.value];
              current.children[0].children =
                current.children[0].children || asyncAreaList[current.children[0].value];
              asyncSelectedIndex[1] = 0;
              asyncSelectedIndex[2] = 0;
            }

            if (i === 1) {
              const current = asyncData[asyncSelectedIndex[0]].children[newIndex];
              current.children = current.children || asyncAreaList[current.value];
              asyncSelectedIndex[2] = 0;
            }
            this.asyncPicker.setData(asyncData, asyncSelectedIndex);
          }, 500);
        }
      }
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      console.log(selectedVal, selectedIndex, selectedText);
    },
    cancelHandle() {
      this.$createToast({
        type: 'correct',
        txt: 'Picker canceled',
        time: 1000,
      }).show();
    },
  },
};
</script>

<style lang="stylus" >
.popup-view {
  .content > div {
    margin: 10px 0;
  }
  .picker-btn{
    margin-bottom 10px
  }
}

.grimm-my-popup {
  .grimm-popup-center {
    .grimm-popup-content {
      padding: 20px;
    }
  }

  .grimm-popup-content {
    padding: 80px 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
  }
}

.grimm-extend-popup {
  .grimm-extend-popup-content {
    padding: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
  }
}
</style>
